<script setup lang='ts'>
withDefaults(defineProps<{
    modelValue?: string,
    readonly?: boolean,
}>(), { readonly: false })
const emits = defineEmits(["update:modelValue"]);
const inputHandler = (e: any) => {
    emits('update:modelValue', (e.target.value).toString())
}
</script>

<template>
    <div class=" readonly_flag">
        <textarea type="text" :value="modelValue" @input="inputHandler($event)" />
    </div>
</template>

<style scoped>
textarea {
    /* width: 190px; */
    width: 100%;
    min-height: 110px;
    height: auto;
    background: rgba(28, 28, 29, 0.6);
    border-radius: 4px;
    border: 1px solid #3b3c40;
    color: rgba(230, 230, 230, 1);
    padding-left: 11px;
    box-sizing: border-box;
    resize: none;
    word-wrap: break-word;
    outline: none;
}

textarea:focus {
    border: 1px solid #2c68f7;
}

textarea:hover {
    border: 1px solid #2c68f7;
}

textarea::-webkit-scrollbar {
    width: 3px;
    background-color: rgba(41, 42, 46, 1);
    border-radius: 2px;
}

textarea::-webkit-scrollbar-thumb {
    background-color: rgba(183, 183, 183, 1);
    border-radius: 2px;
}

.readonly_flag {
    width: 100%;
    height: 110px;
    background: rgba(28, 28, 29, 0.80);
    border: none;
    color: rgba(230, 230, 230, 1);
    margin-top: 5px;
    outline: none;
    resize: none;
    box-sizing: border-box;

}
</style>